
<template>
  <!-- 用户授权二合一 -->
  <div id="dictSet">
    <Breadcrumb content="评级任务" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-input type="search" v-model="form.keyvalue" clearable class="vxeInputSearch" @search-click="getTaskList" @clear="getTaskList" @keyup.enter="getTaskList" placeholder="关键字查询"></vxe-input>
          <vxe-button type="text" class="button-blue" @click="getTaskList" icon="vxe-icon-refresh">刷新</vxe-button>
        </template>
      </vxe-toolbar>
      <div class="tableBox">
        <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar"  height="auto" :data="tableData" :row-config="{ isCurrent: true }" :column-config="{ resizable: true }" show-overflow keep-source :scroll-y="{ enabled: true }" @current-change="itemRowClick" >
          <vxe-column type="checkbox" width="26"></vxe-column>
          <vxe-column type="seq" title="#" width="30"></vxe-column>
          <vxe-column field="processCode" title="任务编号" > </vxe-column>
          <vxe-column field="processName" title="任务名称" > </vxe-column>
          <vxe-column field="versionName" title="版本编号" > </vxe-column>
          <vxe-column field="gradeName" title="级别"> </vxe-column>
          <vxe-column field="status" title="状态" width="90">
            <template #default="{ row }">
             <span v-if="row.status" class="table-tag" :class="`bg-${getStateLabelByCode(row.status).color}`">
               {{ getStateLabelByCode(row.status).label }}
             </span>
            </template>
          </vxe-column>
          <vxe-column field="" align="center" title="进度">
            <template #default="{ row }">
              <div class="progress-box" :class="{ 'bg-brilliantGreen': row.finishData === row.sumData, 'bg-red1': row.finishData !== row.sumData }">
                {{ row.finishData }} / {{ row.sumData }}
              </div>
            </template>
          </vxe-column>
          <vxe-column title="操作" align="center">
            <template #default="{ row, rowIndex }">
              <vxe-button type="text" status="danger" icon="vxe-icon-search" @click="openWin('1')" circle> </vxe-button>
              <vxe-button type="text" status="danger" icon="vxe-icon-edit" @click="openWin('2')" circle> </vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- 新建/编辑字典分类弹框 -->

      <vxe-modal class-name="animation-slide-right"  modal-class="drawerBulkModal" v-model="visible" title="处理任务" width="100vw" height="100vh" show-zoom resize>
      <EmrProcessHandle ref="ratingDetailRed"></EmrProcessHandle>
      </vxe-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { isEmpty } from 'lodash';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '../../stores/store';
import EmrProcessHandle from '@/views/emr_rate/EmrProcessHandle.vue';
import {VXETable} from "vxe-table";
let store = AppStore();


// 全局变量定义区 ==========

let visible = ref(false);
let ratingDetailRed: any = ref(null);
let tableData: any = reactive([]);
let versionList: any = reactive([]);
let gradeList: any = reactive([]);
const form = reactive({
  keyvalue: '' ,
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
}); //根据关键字查询
// 最左侧 新建/编辑字典分类弹框表单
let taskForm = reactive({
  id: null,
  orgId: '',
  processCode: '',
  processName: '',
  versionCode: '',
  versionName: '',
  gradeCode: '',
  gradeName: ''
});

let rateform = reactive({
  id: null,
  orgId: '',
  processCode: '',
  processName: '',
  versionCode: '',
  versionName: '',
  gradeCode: '',
  gradeName: '',
  status: ''
});
let emInsStates =reactive([
      {
        code: 5,
        value: 5,
        name: '未分配',
        label: '未分配',
        color: 'orange'
      },
      {
        code: 0,
        value: 0,
        name: '未完成',
        label: '未完成',
        color: 'orange'
      },
      {
        code: 1,
        value: 1,
        name: '已完成',
        label: '已完成',
        color: 'green'
      }
    ]
)
// 弹框表单校验
let dictTypeFormRule = {
  versionName: [
    {
      required: true,
      message: '请输入版本名称',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 20,
      message: '长度为1到20个字符',
      trigger: 'blur'
    }
  ],
  versionCode: [
    {
      required: true,
      message: '请输入版本编号',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 20,
      message: '长度为1到20个字符',
      trigger: 'blur'
    }
  ],
  emrType: [
    {
      required: true,
      message: '请选择评测类型',
      trigger: 'blur'
    },
    {
      min: 1,
      max: 20,
      message: '长度为1到20个字符',
      trigger: 'blur'
    }
  ]
};

// 方法定义区 =============
onMounted(() => {
  getVersionList();
  findGardeList();
  getTaskList();
});
function openWin(type: string){
  visible.value  = true;
  proxy.$nextTick(() => {
    const data={
      type:type,
      status:rateform.status,
      processCode:  rateform.processCode,
      processName:  rateform.processName,
      gradeCode:  rateform.gradeCode
    }
    ratingDetailRed.value.initPage(data);
  });


}

// 根据 code 匹配状态信息
function getStateLabelByCode(code) {
  const matchedState = emInsStates.find((state: any) => state.code == code);
  return matchedState ? { label: matchedState.label, color: matchedState.color } : { label: '', color: '' };
}
//获取病人类型数据字典
async function getVersionList() {
  versionList.length = 0;
  const url = '/emr/version/getVersionList';
  proxy.$http
      .get(url)
      .then((res: any) => {
        versionList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
// 获取申请项目列表
function findGardeList() {
  gradeList.length = 0;
  const url = '/emr/grade/findEmrGradeList';
  proxy.$http
      .get(url)
      .then((res: any) => {
        gradeList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
// 字典分类 新增or保存
function saveTask(formName: any) {
  const el: any = proxy.$refs[formName];
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    const obj = {
      id: taskForm.id,
      processName: taskForm.processName,
      versionCode: taskForm.versionCode,
      gradeCode: taskForm.gradeCode,
      orgId: !isEmpty(taskForm.orgId) ? taskForm.orgId : store.userInfo.orgId
    };
    let url = '/emr/task/addEmrTask';
    proxy.$http
        .post(url, obj)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('新增任务成功', VxeNotifyType.success);
            getTaskList();
            showTypeDialog.value = false;
          } else {
            VxeMessage('新增任务失败', VxeNotifyType.error);
          }
        })
        .catch((err: any) => {
          VxeMessage('保存异常', VxeNotifyType.error);
        });
  });
}
function getTaskList() {
  tableData.length = 0; //放入数据前清空数据
  const url = '/emr/task/findEmrTaskListByUser';
  proxy.$http
      //注意此处的数据条数
      .get(url, { params: {keyvalue:form.keyvalue} })
      .then((res: any) => {
        tableData.push(...res.data)
        itemRowClick({ row: tableData[0] }); //默认选中第一条数据
      })
      .catch((err: any) => {
        VxeMessage('获取列表失败', VxeNotifyType.error);
      });
}
// 点击字段当前行触发的事件
function itemRowClick({ row }: any) {
  if (isEmpty(row)) {
    Object.assign(rateform, {});
  } else {
    Object.assign(rateform, row);
    (proxy.$refs.tableRef as any).setCurrentRow(row);
  }
}

// 字典分类弹框清空校验 关闭弹框
function closeTaskDialog(formName: any) {
  const el: any = proxy.$refs[formName];
  //移除校验结果
  el.clearValidate();
  taskForm.id = null;
  taskForm.processCode= '';
  taskForm.processName= '';
  taskForm.versionCode= '';
  taskForm.versionName= '';
  taskForm.gradeCode= '';
  taskForm.gradeName= '';
}
</script>

<style lang="scss" scoped>
#dictSet {
  width: 100%;
  height: 100%;
  .bodyContent {
    .tableBox {
      height: calc(100% - 40px);
      .progress-box {
        border: 1px solid #ccc; // 边框颜色
        padding: 2px 6px; // 内边距
        display: inline-flex; // 使用 flex 布局
        align-items: center; // 垂直居中
        justify-content: center; // 水平居中
        width: 30px; // 固定宽度
        height: 20px; // 固定高度
        border-radius: 6px; // 圆角
        font-size: 12px; // 字体大小
        text-align: center; // 文字居中
      }
    }
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
  }
}
</style>
